<template>
  <div>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      width="16"
      height="16"
      viewBox="0 0 16 16"
      fill="none"
      class="one"
      :style="{width:pagesStore.sizeNum + 'px',height:pagesStore.sizeNum + 'px'}"
    >
      <g clip-path="url(#clip-path-104_4441)">
        <rect x="3" y="15" width="8" height="1" rx="0.5" :fill="!theme.includes('2e3c56')? '#224477' : '#fff'"></rect>
        <rect x="0" y="3" width="14" height="10" rx="2" :fill="!theme.includes('2e3c56')? '#224477' : '#fff'"></rect>
        <circle
          cx="12.9990234375"
          cy="2.99951171875"
          r="3"
          stroke="rgba(226, 233, 251, 1)"
          stroke-width="1"
          fill="#FF8D1A"
        ></circle>
      </g>
      <defs>
        <clipPath id="clip-path-104_4441">
          <path d="M0 16L16 16L16 0L0 0L0 16Z" fill="white" />
        </clipPath>
      </defs>
    </svg>
  </div>
</template>

<script setup>
import useSettingsStore from "@/store/modules/settings";
import usePagesStore from '@/store/modules/pages'
const pagesStore = usePagesStore()

const settingsStore = useSettingsStore();
const topTheme = computed(() => settingsStore.topTheme);
const theme = computed(() => settingsStore.theme);
const topNav = computed(() => settingsStore.topNav);

defineProps({
  isActive: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits();
</script>

<style scoped>
.one{
  display: inline-block;
  vertical-align: middle;
}</style>
